<template>
    <div>
        <el-dialog :title="diseaseWarningInfo.type === '1' ? '新增疾病预警规则' : '修改疾病预警规则'"
            :visible.sync="diseaseWarningInfo.dialogVisible" width="35%" :close-on-click-modal="false">
            <el-form :model="queryParams" ref="queryForm" label-width="120px" :rules="rules">
                <el-form-item label="规则名称：" prop="ruleName" label-width="120px">
                    <el-input v-model="queryParams.ruleName" placeholder="请输入规则名称" />
                </el-form-item>
                <el-form-item label="预警参数：" prop="warningParam">
                    <el-select v-model="queryParams.warningParam" placeholder="请选择预警参数" clearable>
                        <el-option v-for="dict in warningTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="阈值：" prop="thresholdValue">
                    <el-input v-model="queryParams.thresholdValue" placeholder="请输入阈值" />
                </el-form-item>
                <el-form-item label="单位：" prop="warningUnit">
                    <el-input v-model="queryParams.warningUnit" placeholder="请输入单位" />
                </el-form-item>
                <el-form-item label="预警规则：" prop="rule">
                    <el-select v-model="queryParams.rule" placeholder="请选择预警规则" clearable>
                        <el-option v-for="dict in warningRuleOptions" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="预警等级：" prop="warningLevel">
                    <el-select v-model="queryParams.warningLevel" placeholder="请选择预警等级" clearable>
                        <el-option v-for="dict in warningLevelOptions" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="预警适用范围：" prop="rangeApplication">
                    <el-select v-model="queryParams.rangeApplication" placeholder="请选择预警适用范围" clearable>
                        <el-option v-for="dict in rangeApplicationOptions" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { settingAdd, settingEdit, getSettingView, getDataType } from '@/api/base/diseaseWarningRules'

export default {
    props: {
        diseaseWarningInfo: {
            type: Object,
            default: false
        }
    },
    data() {
        return {
            queryParams: {},
            warningRuleOptions: [],
            warningLevelOptions: [],
            warningTypeOptions:[],
            rangeApplicationOptions: [],
            rules: {
                ruleName: [
                    { required: true, message: '规则名称不能为空', trigger: 'blur' }
                ],
                warningParam: [
                    { required: true, message: '预警参数不能为空', trigger: 'blur' }
                ],
                thresholdValue: [
                    { required: true, message: '阈值不能为空', trigger: 'blur' }
                ],
                warningUnit: [
                    { required: true, message: '单位不能为空', trigger: 'blur' }
                ],
                rule: [
                    { required: true, message: '预警规则不能为空', trigger: 'change' }
                ],
                warningLevel: [
                    { required: true, message: '预警等级不能为空', trigger: 'change' }
                ],
                rangeApplication: [
                    { required: true, message: '预警适用范围不能为空', trigger: 'change' }
                ],

            }
        };
    },
    mounted() {
        if (this.diseaseWarningInfo.type === '2') {
            this.view()
        }
        this.getDicts("warning_rule").then(response => {
            this.warningRuleOptions = response.data
        });
        this.getDicts("warning_level").then(response => {
            this.warningLevelOptions = response.data;
        });
        this.getDicts("warning_range_application").then(response => {
            this.rangeApplicationOptions = response.data;
        });
        this.getDicts("warning_type").then(response => {
           this.warningTypeOptions = response.data;
        });
    },
    methods: {
        close() {
            this.$emit('close')
        },
        add() {
            this.$refs.queryForm.validate(async (valid) => {
                if (valid) {
                    if (this.diseaseWarningInfo.type === '1') {
                        const { data, code, msg } = await settingAdd(this.queryParams)
                        if (code === 200) {
                            this.$message.success(msg)
                            this.$emit('close', 'add')
                        }
                    } else {
                        const { data, code, msg } = await settingEdit(this.queryParams)
                        if (code === 200) {
                            this.$message.success(msg)
                            this.$emit('close', 'add')
                        }
                    }
                }
            });


        },
        //查看
        async view() {
            const { data, code, msg } = await getSettingView(this.diseaseWarningInfo.id)
            if (code === 200) {
                this.queryParams = data
            }
        },
        // async nameChange(val) {
        //     if (val !== '') {
        //         const parmas = {
        //             dictName : val
        //         }
        //         console.log(val, '----------val')
        //         const { data, code, msg } = await getDataType(parmas)
        //     }

        // }
    },
};
</script>

<style scoped lang="scss"></style>
